<template>
    <div class="wrap">
        <div class="date-pick">
            <el-date-picker
                    v-model="pickDate"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                    @change="changeTime"
                    value-format="yyyy-MM-dd">
            </el-date-picker>
        </div>
        <div class="table-main">
            <el-table
                    style="margin-top: 20px"
                    size="small"
                    ref="filterTable"
                    :data="tableData"
                    border :cell-style="rowStyle">
                <el-table-column
                        prop="name"
                        label="员工名称"
                        width="160"
                        header-align="center">
                </el-table-column>
                <el-table-column
                        prop="attendCount"
                        label="应到天数"
                        width="100"
                        header-align="center">
                </el-table-column>
                <el-table-column
                        label="缺勤天数"
                        width="100"
                        header-align="center">
                    <template slot-scope="scope" :scope="scope">
                        <div slot="reference">
                            {{scope.row.collect['0'].length}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="考勤详情"
                        width="160"
                        header-align="center">
                    <template slot-scope="scope" :scope="scope">
                        <el-popover
                                placement="right"
                                title="缺勤详情(如需切换查询时间段请在上方更改)"
                                width="500"
                                trigger="click">
                            <el-calendar>
                                <template slot="dateCell"
                                          :scope="scope" slot-scope="{date,data}">
                                    <p>
                                        {{ data.day.split('-').slice(1).join('-') }}
                                        {{scope.row.collect['0'].indexOf(data.day)!==-1?'✘':'' }}
                                        {{scope.row.collect['1'].indexOf(data.day)!==-1?'✔️':'' }}
                                    </p>
                                </template>
                            </el-calendar>
                            <el-button slot="reference" size="mini">点击查看详情</el-button>
                        </el-popover>

                    </template>
                </el-table-column>
                <el-table-column
                        label="考勤率"
                        width="160"
                        header-align="center">
                    <template slot-scope="scope">
                        <div>
                            <el-progress :text-inside="true" :stroke-width="12"
                                         :percentage="parseFloat((scope.row.clockInRate*100).toFixed(1))"
                            ></el-progress>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page-pick">
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page.sync="current"
                    :page-size="10"
                    layout="prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>

    import {getAttendByTime} from "@/utils/apis/employee";
    import filter from "@/utils/filter";

    export default {
        name: "WorkAttendance",
        data() {
            return {
                //页数选择
                current: 1,
                total: 0,
                tableData: [],
                //日期选择器
                pickDate: [],
                start: '',
                end: '',
                //日期快捷选项
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
            }
        },
        created() {
            //计算一个月内时间戳
            const currentDate = new Date()
            const oneMonthAgo = new Date(new Date().toLocaleDateString()).getTime() - 31 * 24 * 3600 * 1000
            this.start = filter.formatDate(oneMonthAgo, 'yyyy-MM-dd')
            this.end = filter.formatDate(currentDate, 'yyyy-MM-dd')
            this.initData(this.start, this.end)
        },
        methods: {
            test(val) {
                console.log(val)
            },
            //初始化数据
            initData(start, end) {
                this.pickDate[0] = start
                this.pickDate[1] = end
                this.handleCurrentChange(1)
            },
            //更新表格数据
            updateFormData(val) {
                this.tableData = val.data.data.records
                // console.log(this.tableData)
            },
            //表格文字居中
            rowStyle() {
                return "text-align:center";
            },
            handleCurrentChange(val) {
                const loading = this.$loading({
                    lock: true,
                    text: '更新数据.......',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                this.current = val
                getAttendByTime(this.current, 10, this.start, this.end).then(res => {
                    // console.log(res.data)
                    if (res.data.code === 200) {
                        this.total = res.data.data.total
                        this.updateFormData(res)
                        loading.close()
                    } else {
                        this.$message.error('数据请求失败')
                    }
                })
            },
            //更改时间范围
            changeTime() {
                console.log(this.pickDate)
                if (this.pickDate != null) {
                    this.start = this.pickDate[0]
                    this.end = this.pickDate[1]
                    this.initData(this.start, this.end)
                }
            },


        }

    }
</script>

<style scoped>
    .wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .date-pick {
        margin-top: 10px;
    }

    .table-main {
        width: 681px;
        margin-top: 20px;
    }

    .page-pick {
        margin-top: 25px;
    }

    .is-outClock {
        color: rgba(115, 128, 70, 0.66);
    }
</style>